<template>
	<view class="waybill">
		<view class="lis_ul">
			<view class="lis_li" v-for="(item,index) in list" :key="index">
				<view class="tops">
					<view>订单号：{{item.order_number}}</view>
					<view>{{item.buying_time}}</view>
				</view>
				<view class="cont">
					<view class="xx">
						<view class="vis">
							<view>{{item.contacts}}</view>
							<view>雇主</view>
						</view>
						<view class="vis">
							<view>{{item.starting_point}}</view>
							<view>出发点</view>
						</view>
						<view class="vis">
							<view>{{item.end}}</view>
							<view>目的地</view>
						</view>
						<view class="vis">
							<view>{{item.kilometers}}</view>
							<view>公里</view>
						</view>
					</view>
					<view class="jg">
						<view>起步：{{item.payment_amount}}元</view>
						<view>总价：{{item.vehicle_price}}元</view>
					</view>
				</view>
				<view class="bots">
					<view>联系方式：{{item.ltelephone}}</view>
				</view>
			</view>
			<view class="list_bots" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import { queryLogisticsAll } from '@/utils/api.js';
	export default {
		data() {
			return {
				id:0,
				// 订单数据
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				// 最大值
				max: 5,
				// 页数
				current:1,
				// 每页数量
				pageSize:5
			}
		},
		computed:{
			
		},
		onShow(){
			
		},
		onLoad(e) {
			// console.log(e);
			this.id=e.id
			this.initData();
		},
		// 监听页面卸载
		onUnload() {
			this.max = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.current=1,
			this.pageSize=5
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			console.log("onReachBottom");
			if (this.list.length > this.max || this.loadMoreText=='没有更多订单了!') {
				this.loadMoreText = "没有更多订单了!"
				return;
			}
			this.showLoadMore = true;
			this.current+=1
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			// 获取搬运工数据
			initData(){
				// 获取搬运工数据
				queryLogisticsAll({
					current:this.current,
					pageSize:this.pageSize,
					logisticsId:this.id
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						this.list=res.data
						if(this.list.length < 5){
							this.showLoadMore = true;
							this.loadMoreText = "没有更多订单了!"
						}
						uni.stopPullDownRefresh();
				    } else {
						uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 下拉加载数据
			setListData() {
				let data = [];
				// 获取店铺数据
				queryLogisticsAll({
					current:this.current,
					pageSize:this.pageSize,
					logisticsId:this.id
				}).then((res) => {
				    if (res.code === 200) {
				      // console.log(res);
					  data=res.data
					  if(data.length < 5){
					  	this.showLoadMore = true;
					  	this.loadMoreText = "没有更多订单了!"
					  }
					  this.list = this.list.concat(data);
				    } else {
				      uni.showToast({title:"请求错误", position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.waybill{
		.lis_ul{
			padding: 10px;
			.lis_li{
				height: 170px;
				background: #FFFFFF;
				border-radius: 10px;
				padding: 10px;
				margin-bottom: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tops{
					display: flex;
					justify-content: space-between;
					view:nth-child(1){
						font-size: 15px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $mainText;
						line-height: 18px;
					}
					view:nth-child(2){
						font-size: 13px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 16px
					}
				}
				.cont{
					display: flex;
					flex-direction: column;
					.xx{
						display: flex;
						justify-content: space-between;
						.vis{
							width: 25%;
							display: flex;
							flex-direction: column;
							align-items: center;
							view:nth-child(1){
								font-size: 18px;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 600;
								color: $mainText;
								line-height: 25px;
							}
							view:nth-child(2){
								font-size: 15px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: $text;
								line-height: 30px;
							}
						}
					}
					.jg{
						margin-top: 15px;
						display: flex;
						justify-content: space-between;
						view{
							// width: 33.33%;
							font-size: 15px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $text;
							line-height: 21px;
						}
					}
				}
				.bots{
					display: flex;
					justify-content: space-between;
					font-size: 15px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: $text;
					line-height: 30px;
				}
			}
			.list_bots{
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: $mainText;
				line-height: 30px;
				text-align: center;
			}
		}
	}

</style>
